import React from 'react';
import { Toast,Carousel, } from 'antd-mobile';


export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            slideIndex: 0,
            data: [],
            id: props.match.params.id,
            level: 0
        }
    }
	componentDidMount(){
		document.title = '勋章详情'
        global.Ajax.hhtc_request("medal/medalDetail",{type: this.state.id}).then(data=>{
			if(data.code===1){
                this.setState({
                    data: data.data.data,
                    level: data.data.level,
                })
            }
		})
	}
	render(){
		return(
			<div className='xz_list_box'>
                <Carousel className="space-carousel"
                    cellSpacing={10}
                    slideWidth={0.44}
                    infinite
                    dots={false}
                    beforeChange={(from,to)=>{
                        console.log(to)
                        this.setState({ slideIndex: to })
                    }}
                    // afterChange={index => this.setState({ slideIndex: index })}
                >
                    {this.state.data.map((val, index) => (
                        <a
                            key={'val'+index}
                            style={{
                                display: 'block',
                                position: 'relative',
                                top: this.state.slideIndex !== index ? 10 : 0,
                                // height: this.state.imgHeight,
                                transition: '.2s',
                                transform: this.state.slideIndex !== index ? 'scale(.8)' : 'scale(1)'
                            }}
                        >
                            <img
                                src={val.icon}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                            />
                        </a>
                    ))}
                </Carousel>
                {this.state.data.length>0&&<React.Fragment>
                    <h1 className='level_title'>{this.state.data[this.state.slideIndex].title}</h1>
                    <p className='level_desc'>{this.state.data[this.state.slideIndex].info}</p>
                </React.Fragment>}
                <div className='steps_list'>
                    <div className='lvx' style={{width: this.state.level+'%'}}></div>
                    <div className='pbox'>
                        {this.state.data.map((item,index)=>{
                            if(index<this.state.level){
                                return(
                                    <div key={'index'+index}>
                                        <p className='point'></p>
                                    </div>
                                )
                            }else if(index===this.state.level){
                                return(
                                    <div className='active' key={'index'+index}>
                                        <p className='point'></p>
                                    </div>
                                )
                            }else{
                                return(
                                    <div key={'index'+index}>
                                        <p></p>
                                    </div>
                                )
                            }
                        })}
                    </div>
                </div>
			</div>
		)
	}
}
